<template>
  <div class="business-desc">
    <!-- 作品描述 -->
    <div class="desc-title" v-if="title">{{ title }}</div>
    <div class="desc-warp" v-if="formatContent(content).length == 1">{{ formatContent(content)[0] }}</div>
    <div class="desc" v-else>
      <p class="desc-item" v-for="(d, i) in formatContent(content)" :key="i">{{ d }}</p>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    title: String,
    content: String
  },
  methods: {
    formatContent(content) {
      return content.split('\n')
    }
  }
}
</script>

<style lang="less" scoped>
.business-desc {
  .desc-title {
    font-weight: 700;
    font-size: 16px;
    line-height: 24px;
    margin-bottom: 5px;
    color: #3a3a3a;
    overflow: hidden;
    text-overflow: ellipsis; /*显示为......*/
    -webkit-line-clamp: 2; /*显示为两行，在第二行中显示为.......*/
    display: -webkit-box;
    -webkit-box-orient: vertical;
  }

  .desc-warp {
    font-weight: 600;
    font-size: 12px;
    line-height: 18px;
    color: #444;
    overflow: hidden;
    text-overflow: ellipsis; /*显示为......*/
    -webkit-line-clamp: 3; /*显示为两行，在第二行中显示为.......*/
    display: -webkit-box;
    -webkit-box-orient: vertical;
  }

  .desc {
    font-weight: 600;
    font-size: 12px;
    height: 50px;
    color: #444;
    overflow: auto;
    &::-webkit-scrollbar {
      display: none;
    }

    p {
      line-height: 18px;
    }
  }
}
</style>
